<template>
  <div class="footer">
    <div style="max-width: 1200px;margin: 0 auto">
      <!--       友情链接-->
      <div class="link-wrap">
        <ul>
          <li><a href="#">大别山</a></li>
          <li><a href="#">天堂寨</a></li>
          <li><a href="#">天柱山</a></li>
        </ul>
      </div>
      <!--      联系-->
      <div class="copyright">
        <!--        底部导航-->
        <div class="footer-menu">
          <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">联系站长</a></li>
            <li><a href="#">留言板</a></li>
            <li><a href="#">友链申请</a></li>
            <li><a href="/ECharts">ECharts</a></li>
            <li><a href="/VECharts">VECharts</a></li>
          </ul>
        </div>
        <!--        网站备案-->
        <div class="copyright-text">
          <p>Copyright © Xuanmo Blog All Rights Reserved. 2016-2019  京ICP备15011150号-2  本站CDN存储由 upyun 赞助提供，云服务器优惠</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>


</script>

<style lang="less" scoped>
  .footer {
    /*max-width: 1200px;*/
    /*height: 200px;*/
    padding: 30px;
    margin: 0 auto;
    background-color: #2d3237;
    color: #ffffff;

    .link-wrap {
      padding-bottom: 20px;
      border-bottom: 1px solid #3b424a;
      ul {
        display: flex;
        li {
          padding: 0 20px;
          list-style-type: none;
          font-size: 16px;
          a {
            color: #9295a2;
          }
        }
        li:first-child{
          padding-left: 0;
        }
      }
    }
    .copyright{
      color: #666;
      .footer-menu{
        ul{
          display: flex;
          /*padding: 20px;*/
          padding-top: 30px;
          flex-wrap: wrap;
          li{
            padding: 0 20px;
            list-style-type: none;
            a{
              color: #666;
            }
          }
          li:first-child{
            padding-left: 0;
          }
        }
      }

    }
  }
</style>
